<script setup>
import { ref } from 'vue'
import { 
  noticeListService,
  noticeTypeListServce,
  noticeAddService,
  noticeTypeAddService,
  noticeUpdateService,
  noticeTypeUpdateService,
  noticeDeleteService,
  noticeTypeDeleteService
 } from '@/api/notice'
 import { formatDate } from'@/utils/formdata'
 import {ElMessage} from 'element-plus'
const noticeData = ref()
const getNoticeLsit = async() => {
  let result = await noticeListService()
  noticeData.value = result.data
  noticeData.value.forEach((item) => {
    item.createTime = formatDate(item.createTime)
  }) 
}
const typeData = ref()
const typeList = ref()
const getTypeList = async() => {
  let result = await noticeTypeListServce()
  //获取所有公告类别，存入字典
  typeList.value = result.data.map(item => item.noticeType)
  typeData.value = result.data
  console.log('typeList', typeList.value)
}
getTypeList()
getNoticeLsit()

const updateNotice = async() => {
  let result = await noticeUpdateService(noticeModel.value)
  ElMessage.success(result.msg? result.msg:'修改成功');
  await getNoticeLsit()
  visibleDrawerNotice.value = false
}

const updateNoticetype = async() => {
  let result = await noticeTypeUpdateService(typeModel.value)
  ElMessage.success(result.msg? result.msg:'修改成功');
  await getTypeList()
  visibleDrawerType.value = false
}

const addNotice = async() => {
  let result = await noticeAddService(noticeModel.value)
  ElMessage.success(result.msg? result.msg:'添加成功');
  await getNoticeLsit()
  visibleDrawerNotice.value = false
}

const addNoticeType = async() => {
  let result = await noticeTypeAddService(typeModel.value)
  ElMessage.success(result.msg? result.msg:'添加成功');
  await getTypeList()
  visibleDrawerType.value = false
}
import {ElMessageBox} from 'element-plus'
const deleteNotice = async(row) => {
   //提示用户 确认框
  ElMessageBox.confirm(
    '你确认要删除吗?',
    '温馨提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  .then(async () => {
    //调用接口
    let result = await noticeDeleteService(row.id);
    ElMessage({
      type: 'success',
      message: '删除成功',
    })
    //刷新列表
    await getNoticeLsit()
  })
  .catch(() => {
    ElMessage({
      type: 'info',
      message: '用户取消了删除',
    })
  })
}

const deleteNoticeType = async(row) => {
  ElMessageBox.confirm(
    '你确认要删除吗?',
    '温馨提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  .then(async () => {
    //调用接口
    let result = await noticeTypeDeleteService(row.id);
    ElMessage({
      type: 'success',
      message: '删除成功',
    })
    //刷新列表
    await getTypeList()
  })
  .catch(() => {
    ElMessage({
      type: 'info',
      message: '用户取消了删除',
    })
  })
}

const noticeModel = ref({
  id: '',
  noticeTitle: '',
  noticeContent: '',
  noticeType: '',
  createTime: ''
})
const typeModel = ref({
  id: '',
  noticeType: '',
  typeDesc:''
})
const titleNoticeDrawer = ref()
const titleTypeDrawer = ref()
const visibleDrawerNotice = ref()
const visibleDrawerType = ref()
const value = ref(new Date())

const showDialogNotice = (row) => {
  visibleDrawerNotice.value = true
  titleNoticeDrawer.value = '编辑公告'
  noticeModel.value.noticeTitle = row.noticeTitle
  noticeModel.value.noticeContent = row.noticeContent
  noticeModel.value.noticeType = row.noticeType
  noticeModel.value.id = row.id
  console.log('row', row)
}
const showDialogType = (row) => {
  visibleDrawerType.value = true
  titleTypeDrawer.value = '编辑公告类别'
  typeModel.value.id = row.id
  typeModel.value.noticeType = row.noticeType
  typeModel.value.typeDesc = row.typeDesc
  console.log('row', row)
}
const clearData = () => {
  noticeModel.value.noticeTitle = ''
  noticeModel.value.noticeContent = ''
  noticeModel.value.noticeType = ''
  noticeModel.value.id = ''
  typeModel.value.id = ''
  typeModel.value.noticeType = ''
  typeModel.value.typeDesc = ''
}
</script>

<template>
  <el-row :gutter="10">
    <el-col :span="8">
      <el-card>
        <template #header>
          <div class="clearfix">
            <span>公告类别</span>
            <el-button type="primary" style="float: right; padding: 3px 5px" @click="titleTypeDrawer='添加公告类别';clearData();visibleDrawerType = true">
              添加类别
            </el-button>
          </div>
        </template>
        <el-table :data="typeData" stripe style="width: 100%" height="311px">
          <el-table-column align="left" prop="noticeType" label="公告类别" width="auto" />
          <el-table-column align="center" label="操作" width="auto">
            <template #default="scope">
              <el-button type="primary" plain size="small" @click="showDialogType(scope.row)">编辑</el-button>
              <el-button type="danger" plain size="small" @click="deleteNoticeType(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog v-model="visibleDrawerType" :title="titleTypeDrawer" width="400px">
          <el-form v-model="typeModel"> 
              <el-form-item label="公告类别">
                <el-input v-model="typeModel.noticeType" placeholder="请输入活动名称" />
              </el-form-item>
              <el-form-item label="类别备注">
                <el-input v-model="typeModel.typeDesc" placeholder="请输入活动名称" />
              </el-form-item>
              <el-form-item style="padding-left: 70px;">
                <el-button type="primary" plain @click="titleTypeDrawer==='编辑公告类别'?updateNoticetype():addNoticeType()">提交</el-button>
                <el-button type="danger" plain @click="visibleDrawerType=false">取消</el-button>
              </el-form-item>
          </el-form>
        </el-dialog>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card style="height: 100%">
        <template #header>
          <div class="clearfix">
            <span>添加公告</span>
          </div>
        </template>
        <el-form :model="noticeModel"> 
            <el-form-item label="标题" prop="noticeTitle">
              <el-input v-model="noticeModel.noticeTitle" placeholder="请输入公告名称" />
            </el-form-item>
            <el-form-item label="类别" prop="noticeType">
                <el-select v-model="noticeModel.noticeType" placeholder="请选择公告类型" style="width: 100%">
                  <el-option
                    v-for="item in typeList"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
            </el-form-item>
            <el-form-item label="内容" prop="noticeContent">
              <el-input v-model="noticeModel.noticeContent" type="textarea" placeholder="请输入公告内容" :autosize="{ minRows: 5, maxRows: 5 }" style="width: 100%"/>
            </el-form-item>
            <el-form-item style="padding-left: 40px;">
              <el-button type="primary" plain @click="addNotice()">提交</el-button>
              <el-button style="margin-left: 64%;" type="danger" plain @click="clearData()">清空</el-button>
            </el-form-item>
          </el-form>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card>
        <el-calendar>
          <el-calendar v-model="value" />
        </el-calendar>
      </el-card>
    </el-col>
  </el-row>
  <el-row :gutter="10" style="margin-top: 10px">
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="clearfix">
              <span>公告</span>
              <el-button type="primary" style="float: right; padding: 3px 5px" @click="titleNoticeDrawer='添加公告';clearData();visibleDrawerNotice = true">
                添加公告
              </el-button>
            </div>
          </template>
          <el-table :data="noticeData" stripe style="width: 100%" height="311px">
            <el-table-column prop="createTime" label="日期" width="auto" />
            <el-table-column prop="noticeTitle" label="标题" width="auto" />
            <el-table-column prop="noticeContent" label="内容" width="auto"/>
            <el-table-column prop="noticeType" label="类型" width="auto" />
            <el-table-column align="center" label="操作" width="150">
              <template #default="scope">
                <el-button type="primary" plain size="small" @click="showDialogNotice(scope.row)">编辑</el-button>
                <el-button type="danger" plain size="small" @click="deleteNotice(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-drawer v-model="visibleDrawerNotice" :title="titleNoticeDrawer" direction="rtl">
            <el-form :model="noticeModel"> 
                <el-form-item label="标题">
                  <el-input v-model="noticeModel.noticeTitle" placeholder="请输入标题" />
                </el-form-item>
                <el-form-item label="类别" prop="noticeType">
                    <el-select v-model="noticeModel.noticeType" placeholder="请选择公告类型" style="width: 100%">
                      <el-option
                        v-for="item in typeList"
                        :key="item"
                        :label="item"
                        :value="item"
                      />
                    </el-select>
                </el-form-item>
                <el-form-item label="公告">
                  <el-input v-model="noticeModel.noticeContent" placeholder="请输入公告内容" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" plain @click="titleNoticeDrawer==='编辑公告'?updateNotice():addNotice()">提交</el-button>
                  <el-button type="danger" plain @click="visibleDrawerNotice=false;clearData()">取消</el-button>
                </el-form-item>
            </el-form>
          </el-drawer>
        </el-card>
      </el-col>   
  </el-row>
</template>
<style scoped lang="scss">
.no-shadow {
  box-shadow: none !important; /* 去除阴影 */
}
::v-deep .el-calendar-table thead th {
    padding: 0;
    font-size: 13px;
    
}
::v-deep .el-calendar-table tbody td {
    padding: 0;
    font-size: 13px;
    text-align: center;
    color: black;
}
::v-deep .el-calendar-table .el-calendar-day {
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 30px;

}
</style>